
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title></title>
    <link href="js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <link href="css/table.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color: #ecf0f5;font-family: 微软雅黑;color: #475059;min-width: 1000px;overflow: auto">
<div class="news_main">

    <div class="l_left news_left">

        <h6>区域目录</h6>
        <div class="tree_left_top">
            <div class=" order_ztree l_left organize_ztree" style="width: 100%">
                <p><ul id="treeDemo" class="ztree"  style=" overflow:auto;margin-left: 20px"></ul></p>
            </div>
        </div>
    </div>
    <div class="l_left news_right">
        <h6>灯具管理列表</h6>
        <div class="notice_check">

              <p>

                  <label>灯具名称：</label><input type="text" class="find_input">
                  <label>灯具类型：</label><select class="find_input"></select>
                  <button class="check_btn">查询</button>
              </p>


        </div>
        <div class="clear"></div>

        <div class="notice_check">
            <div class="notice_nav r_right paddingBotme">
                <P>
                <a class="btn btn-default" onclick="add()"><span class="glyphicon glyphicon-plus"></span>新增</a>
                <a class="btn btn-default" onclick="deleteAll()"><span class="glyphicon glyphicon-remove"></span>删除</a>

                </P>
            </div>
        </div>
            <div class="clear"></div>

        <ul class="news_table department_table">
            <li>
                <table id="table" class="table_style" style="margin: 0 auto" ></table>
            </li>
        </ul>

    </div>
    <div class="clear"></div>

</div>
<script src="js/jquery/jQuery-2.2.0.min.js"></script>
<script src="js/bstable/js/bootstrap.min.js"></script>
<script src="js/bstable/js/bootstrap-table.js"></script>
<script src="js/bstable/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="js/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/ztree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="js/ztree/jquery.ztree.exedit-3.5.js"></script>
<script src="js/layer_v2.1/layer/layer.js"></script>
<script src="js/localLight.js"></script>

<script>
    $(function () {
        $('#table').bootstrapTable({
            method: "get",
            striped: true,
            singleSelect: false,
            url: "/querySetLight",
            dataType: "json",
            pagination: true, //分页
            pageSize: 10,
            pageNumber: 1,
            search: true, //显示搜索框
            contentType: "application/x-www-form-urlencoded",
            queryParams:true,
            columns: [
                {
                    checkbox: "true",
                    field: 'check',
                    align: 'center',

                    valign: 'middle'
                }
                ,
                {
                    title: "灯具名称",
                    field: 'name',
                    align: 'center',
                    width: 160,
                    valign: 'middle'
                },
                {
                    title: "灯具类型",
                    field: 'type',
                    align: 'center',
                    width: 80,
                    valign: 'middle'
                },
                {
                    title: '地址',
                    field: 'url',
                    align: 'center',
                    width: 120,
                    valign: 'middle'
                },
                {
                    title: '坐标',
                    field: 'xy',
                    align: 'center',
                    width: 120,
                    valign: 'middle'
                },

                {
                    title: '分组',
                    field: 'light',
                    align: 'center',
                    width: 120,
                    valign: 'middle'
                },
                {
                    title: '区域',
                    field: 'low',
                    align: 'center',
                    width: 120,
                    valign: 'middle'
                },

                {
                    title: '操作',
                    field: 'person',
                    width: 120,
                    align: 'center',
                    formatter: function (cellval, row) {
                        var  e = '<button  id="add" data-id="98" class="btn btn-xs btn-success" onclick="update(\'' + row.id + '\')">编辑</button> ';

                        var  d = '<button  id="add" data-id="98" class="btn btn-xs btn-danger" onclick="del(\'' + row.id + '\')">删除</button> ';
                        return  e + d;
                    }
                }

            ]
        });
    });
    function change(){
        $(".dropdown-menu>li").click(function(){
            $(".change").html($(this).html())
        })
    }
    function add(){
        layer.open({
            type: 2,
            title: '添加详情',
            shadeClose: true,
            shade: 0.5,
            skin: 'layui-layer-rim',
            closeBtn:1,
            area: ['1100px', '550px'],
            content: 'controlLightTail.html'
        });
    }

    function update(id){
      alert(id);
      layer.open({
        type: 2,
        title: '添加详情',
        shadeClose: true,
        shade: 0.5,
        skin: 'layui-layer-rim',
        closeBtn:1,
        area: ['1100px', '550px'],
        content: 'controlLightTail1.html?id='+id,
      });
    }
    function data() {
        var Name = "监控数据";
        var Href = "setData.html";
        var data_id = $("#add").attr('data-id');
        window.parent.$.learuntab.myAddTab(Name, Href, data_id);
    }

    function del() {
      var tid;// 声明一个tid
      // $("#table").bootstrapTable('getSelections');为bootstrapTable自带的，所以说一定要使用bootstrapTable显示表格,#table：为table的id
      var rows = $("#table").bootstrapTable('getSelections');
      if (rows.length == 0) {// rows 主要是为了判断是否选中，下面的else内容才是主要
        alert("请先选择要删除的记录!");
        return;
      }
      if ((rows.length >= 2)) {
        alert("请先选择一条记录!");
        return;
      } else {
        $(rows).each(function () {// 通过获得别选中的来进行遍历
          tid = this.id;// cid为获得到的整条数据中的一列
        });
      }
      alert(tid);
      $.ajax({
        type: "post",//方法类型
        dataType: "json",//预期服务器返回的数据类型
        data: {
          id: tid
        },
        url: "/deleteLamp",
        success: function (data) {
          if (data=="1") {
            alert("删除成功");
            $("#table").bootstrapTable('refresh');
          } else {
            alert(data);
          }
        }
      })
    }

    function deleteAll() {
      var ids;
      // $("#table").bootstrapTable('getSelections');为bootstrapTable自带的，所以说一定要使用bootstrapTable显示表格,#table：为table的id
      var rows = $("#table").bootstrapTable('getSelections');
      if (rows.length == 0) {// rows 主要是为了判断是否选中，下面的else内容才是主要
        alert("请至少选择一条要删除的记录!");
        return;
      } else {
        var arrays = new Array();// 声明一个数组
        $(rows).each(function () {// 通过获得别选中的来进行遍历
          arrays.push(this.id);// cid为获得到的整条数据中的一列
        });
        ids = arrays.join(','); // 获得要删除的id
        alert(ids);
      }
      $.ajax({
        type: "post",//方法类型
        dataType: "json",//预期服务器返回的数据类型
        url: "/deleteAllLamp",
        data: {
          ids : ids
        },
        success: function (data) {
          if (data=="1") {
            alert("删除成功");
            $("#table").bootstrapTable('refresh');
          } else {
            alert(data);
          }
        }
      })
    }
</script>
</body>
</html>
